<template>
  <div class="mine">
    <div class="car-header">
      <div class="car-left">
        <van-card
          desc="ID:545445"
          title="吴汉三"
          thumb="https://img0.baidu.com/it/u=2670541740,1999313464&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500"
          @click="goDetail('/mine/infor')"
        />
      </div>
      <div class="car-right">
        <van-icon name="qr" />
        <van-icon name="arrow" />
      </div>
    </div>
    <div class="mine-content">
      <div class="mine-middle">
        <van-grid>
          <van-grid-item
            icon="points"
            text="我的积分"
            @click="goDetail('/mine/mystore')"
          />
          <van-grid-item
            icon="coupon-o"
            text="我的优惠券"
            @click="goDetail('/mine/discount')"
          />
          <van-grid-item
            icon="star-o"
            text="我的收藏"
            @click="goDetail('/mine/mycollect')"
          />
          <van-grid-item
            icon="clock-o"
            text="浏览记录"
            @click="goDetail('/mine/records')"
          />
        </van-grid>
      </div>
      <div class="mine-middle2">
        <van-panel
          title="我的订单"
          status="查看所有订单>"
        >
          <div>
            <van-grid :column-num="5">
              <van-grid-item
                icon="pending-payment"
                text="待付款"
              />
              <van-grid-item
                icon="logistics"
                text="待发货"
              />
              <van-grid-item
                icon="location-o"
                text="待收货"
              />
              <van-grid-item
                icon="chat-o"
                text="待评价"
              />
              <van-grid-item
                icon="label-o"
                text="退款/售后"
              />
            </van-grid>
          </div>
        </van-panel>
      </div>
      <div class="mine-foot">
        <van-panel
          title="签到有礼"
          @click="goDetail('/mine/sign')"
          status=">"
        ></van-panel>
        <van-panel
          title="我的装修"
          status=">"
          @click="goDetail('/mine/reno')"
        ></van-panel>
        <van-panel
          title="收货地址"
          status=">"
          @click="goDetail('/mine/receive')"
        ></van-panel>
        <van-panel
          title="联系客服"
          status=">"
          @click="goDetail('/mine/cust')"
        ></van-panel>
        <van-panel
          title="我要报价"
          status=">"
          @click="goDetail('/mine/price')"
        ></van-panel>
        <van-panel
          title="反馈建议"
          status=">"
          @click="goDetail('/mine/advice')"
        ></van-panel>
      </div>
    </div>
    <!-- <div class="mine-footer">
      <van-tabbar v-model="active">
        <van-tabbar-item
          icon="home-o"
          to="/home"
        ></van-tabbar-item>
        <van-tabbar-item
          icon="shop-collect-o"
          to="/friends"
        ></van-tabbar-item>
        <van-tabbar-item
          icon="cart-o"
          info="10"
          to="/cart"
        ></van-tabbar-item>
        <van-tabbar-item
          icon="manager-o"
          to="/mine"
        ></van-tabbar-item>
      </van-tabbar>
    </div> -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      // mineList: [
      //   { id: 1, title: '签到有礼' },
      //   { id: 2, title: '我的装修' },
      //   { id: 3, title: '收货地址' },
      //   { id: 4, title: '联系客服' },
      //   { id: 5, title: '我要报价' },
      //   { id: 6, title: '反馈建议' },
      // ],
    };
  },
  methods: {
    // handleClick() {
    //   console.log(1111);
    // },
    goDetail(url) {
      this.$router.push(url);
    },
  },
};
</script>
<style lang="scss">
.mine {
  margin-top: 46px;
  background: #f5f5f5;
  .car-header {
    display: flex;
    align-items: center;
    margin-top: 10px;
    height: 75px;
    line-height: 20px;
    background-color: rgba(234, 234, 234, 100);
    text-align: center;
    .van-card {
      background: 0;
    }
    .van-card__header {
      height: 60px;
      .van-card__thumb {
        height: 60px;
        width: 60px;
        margin-right: -33px;
        margin-left: 29px;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .van-card__title {
        font-size: 20px;
        color: rgba(16, 16, 16, 100);
        height: 29px;
        text-align: center;
        line-height: 29px;
        margin-top: 8px;
      }
      .van-card__desc {
        height: 20px;
        color: rgba(16, 16, 16, 100);
        font-size: 14px;
      }
    }
    .car-left {
      flex: 2;
    }
    .car-right {
      flex: 1;
      .van-icon {
        font-size: 29px;
        color: rgba(151, 151, 151, 100);
        margin-right: 5px;
      }
    }
  }
  .mine-content {
    padding: 0 10px;
    .mine-middle {
      margin-top: 10px;
      height: 81px;
      line-height: 20px;
      border-radius: 2px;
      background: #fff;
      text-align: center;
    }
    .mine-middle2 {
      margin-top: 15px;
      margin-bottom: 15px;
      height: 121px;
      line-height: 20px;
      border-radius: 2px;
      background-color: rgba(255, 255, 255, 100);
      text-align: center;
      .van-cell__title {
        height: 20px;
        color: rgba(16, 16, 16, 100);
        font-size: 14px;
        margin-left: -65px;
      }
      .van-panel__header-value {
        height: 17px;
        color: rgba(145, 145, 145, 100);
        font-size: 12px;
        margin-right: 10px;
      }
    }
    .mine-foot {
      height: 320px;
      line-height: 20px;
      border-radius: 2px;
      background-color: rgba(255, 255, 255, 100);
      .van-panel__header-value {
        color: rgba(151, 151, 151, 100);
      }
    }
  }
}
</style>
